<template>
    <!-- 卡片容器 -->
    <div class="card-pane">
        <div class="title">
            <slot name="title"></slot>
            <span
                class="option"
                :class="viewShow ? 'el-icon-caret-bottom' : 'el-icon-caret-top'"
                @click="handelSwitchPane"
            ></span>
        </div>
        <collapse-transition>
            <div class="list" :class="viewShow ? 'show' : 'hidden'">
                <slot name="list"></slot>
            </div>
        </collapse-transition>
    </div>
</template>
<script>
import CollapseTransition from '@/utils/collapseTransition'
export default {
    components: {
        'collapse-transition': CollapseTransition
    },
    data() {
        return {
            viewShow: true
        }
    },
    methods: {
        handelSwitchPane() {
            this.viewShow = !this.viewShow
        }
    }
}
</script>
<style lang="scss" scoped>
.card-pane {
    @include box_flex(
        $width: 100%,
        $height: auto,
        $direction: column,
        $justify: flex-start,
        $align: flex-start
    );
    .title {
        @include box_flex(
            $width: 100%,
            $height: auto,
            $direction: row,
            $justify: space-between,
            $align: center
        );
        @include background_color($color: 'cover1');

        padding: $margin-sm;
        font-size: $font-md;
        letter-spacing: 3px;
        @include font_color($color: 'primary-light1');
        .label {
            @include box_flex(
                $width: 100%,
                $height: auto,
                $direction: row,
                $justify: flex-start,
                $align: center
            );
            .text {
                margin-left: 5px;
            }
        }
        .option {
            @include box_flex(
                $width: auto,
                $height: 100%,
                $direction: row,
                $justify: center,
                $align: center
            );

            font-size: $font-md;
            cursor: pointer;
            transition: all 0.3s;
        }
    }
    .list {
        @include box_flex(
            $width: 100%,
            $height: auto,
            $direction: row,
            $justify: flex-start,
            $align: flex-start
        );

        transition: all 0.3s;
    }
    .list.show {
        height: auto;
    }
    .list.hidden {
        overflow: hidden;
        height: 0;
    }
}
</style>
